/**
 * MAIN CSS FOR LIGHT THEMING
 */

// CodeMirror scrollbar annotations
.sb-annotation {
  background-color: var(--bg-annotation);
}

// Now all "bigger" styles
body {

  #editor .CodeMirror {
    color: var(--grey-5);

    &.cm-s-zettlr-code {
      // Code files have this theme applied (others have cm-s-zettlr-markdown)
      font-family: 'Inconsolata', Consolas, Menlo, monospace;
    }

    &.cm-stex-mode,
    &.cm-css-mode {
      font-family: 'Inconsolata', Consolas, Menlo, monospace;

      .cm-comment {
        color: var(--grey-2);
      }

      .cm-attribute {
        color: var(--blue-0);
      }

      .cm-builtin {
        color: var(--blue-0);
      }

      // Some modes use this for keywords
      .cm-string {
        color: var(--green-0);
      }

      .cm-string-2 {
        color: var(--gold-selection-dark);
      }

      .cm-variable {
        color: var(--grey-6);
      }

      .cm-variable-2 {
        color: var(--green-selection-dark);
      }

      .cm-keyword {
        color: var(--purple-selection);
      }

      .cm-property {
        color: var(--orange-2);
      }

      .cm-type {
        color: var(--orange-2);
      }

      .cm-atom {
        color: var(--green-0);
      }

      .cm-number {
        color: var(--blue-0);
      }
    }

    // Now general styling for variables

    // First generic variables
    .cm-comment,
    .cm-fenced-code,
    .cm-inline-math {
      color: var(--grey-5);
    }

    .cm-highlight {
      // Both directives are !important to override any other colors.
      background-color: yellow !important;
      color: #333 !important;
    }

    .cm-fenced-code,
    .cm-stex-mode {
      font-family: 'Inconsolata', Consolas, Menlo, monospace;

      &.cm-comment {
        color: var(--grey-2);
      }

      &.cm-attribute {
        color: var(--blue-0);
      }

      &.cm-builtin {
        color: var(--blue-0);
      }

      // Some modes use this for keywords
      &.cm-string {
        color: var(--green-0);
      }

      &.cm-string-2 {
        color: var(--gold-selection-dark);
      }

      &.cm-variable {
        color: var(--grey-6);
      }

      &.cm-variable-2 {
        color: var(--green-selection-dark);
      }

      &.cm-keyword {
        color: var(--purple-selection-dark);
      }

      &.cm-property {
        color: var(--orange-2);
      }

      &.cm-type {
        color: var(--orange-2);
      }

      &.cm-atom {
        color: var(--green-0);
      }

      &.cm-number {
        color: var(--blue-0);
      }

      &.cm-positive {
        color: var(--green-0);
      }

      &.cm-negative {
        color: var(--red-0);
      }
    }

    // HTML tags
    .cm-tag {
      font-family: 'Inconsolata', Consolas, Menlo, monospace;
      color: var(--orange-2);
    }

    .cm-attribute {
      font-family: 'Inconsolata', Consolas, Menlo, monospace;
      color: var(--blue-0);
    }

    .cm-string {
      font-family: 'Inconsolata', Consolas, Menlo, monospace;
      color: var(--green-0);
    }

    .cm-bracket {
      font-family: 'Inconsolata', Consolas, Menlo, monospace;
      color: var(--grey-5);
    }

    // TYPOGRAPHY
    .cm-formatting-header-1,
    .cm-formatting-header-2,
    .cm-formatting-header-3,
    .cm-formatting-header-4,
    .cm-formatting-header-5,
    .cm-formatting-header-6,
    .cm-url {
      color: var(--c-primary);
    }

    .size-header-1,
    .size-header-2,
    .size-header-3,
    .size-header-4,
    .size-header-5,
    .size-header-6 {
      font-weight: bold;
    }

    // Style the code block line wrapper classes
    .code-block-line {
      background-color: #eee;
    }

    .code-block-first-line {
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
    }

    .code-block-last-line {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }

    /* LISTS */
    .cm-formatting-list-ul,
    .cm-formatting-list-ol {
      color: var(--c-primary);
    }

    .cm-spell-error {
      text-decoration: dashed underline;
      text-decoration-color: var(--orange-2);
      // Prevent skipping of low-baseline chars to prevent strange artefacts
      text-decoration-skip-ink: none;
    }

    .cm-zkn-tag,
    .cm-zkn-id,
    .cm-zkn-link,
    .cm-zkn-link-formatting,
    .cm-footnote-formatting {
      color: var(--c-primary);
    }

    .cm-footnote-formatting {
      font-weight: bold;
    }

    // cma = code-mirror-anchor
    .cma {
      color: var(--c-primary);
      font-weight: inherit;
    }

    // citations
    .citeproc-citation {
      background-color: var(--grey-0);

      &.error {
        color: var(--red-2);
      }
    }

    // Mermaid charts
    .mermaid-chart {

      // THEMING
      // For now, a simple background
      // for easy recognition
      svg {
        background-color: var(--grey-4);
        border-radius: 5px;
      }

      cursor: default; // No text cursor

      &.error {
        font-family: 'Inconsolata', Consolas, Menlo, monospace; // For the error messages
        color: var(--fg-error);
      }
    }

    .cm-escape-char {
      color: var(--grey-3);
    }

    // Horizontal ruler
    .cm-hr {
      color: var(--c-primary);
      font-family: 'Inconsolata', Consolas, Menlo, monospace;
      font-weight: bold;
    }

    // Add a cool indicator to the front matter -- overwrites the .cm-hr style above
    .cm-yaml-frontmatter-start {
      color: inherit;

      &::after {
        content: "YAML Frontmatter";
        display: inline-block;
        margin-left: 10px;
        padding: 0px 5px;
        font-size: 60%;
        font-weight: normal;
        vertical-align: middle;
        color: rgb(180, 180, 180);
        background-color: rgb(240, 240, 240);
      }
    }

    .CodeMirror-foldmarker {
      background-color: var(--grey-0);
      color: var(--grey-3);

      &:hover {
        background-color: var(--grey-1);
      }
    }

    .CodeMirror-guttermarker-subtle {
      color: #dadada;
    }

    // Heading tags
    .heading-tag {
      color: var(--grey-1);
      transition: 0.2s all ease;

      &:hover {
        color: var(--grey-3);
        background-color: var(--grey-1);
      }
    }

    // The active line when in typewriter mode
    .CodeMirror-linebackground.typewriter-active-line {
      border-top: 2px solid @grey-3;
      border-bottom: 2px solid @grey-3;
      background-color: @grey-1;
      margin-top: -2px;
      margin-bottom: -2px;
    }
  }

  .CodeMirror-focused .CodeMirror-selected {
    background-color: var(--selection-light);
  }

  .CodeMirror .CodeMirror-selected {
    background-color: var(--selection-light);
  }

  .CodeMirror-cursor {
    background: var(--c-primary);
  }

  // Hint related stuff. Hints mustn't be scoped by .CodeMirror as they are
  // attached to document.body, not the editor
  .CodeMirror-hints {
    -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
    -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
    box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
    border-radius: @border-radius;
    border: 1px solid var(--grey-1);

    background: white;
    font-size: 90%;

    li.CodeMirror-hint {
      color: var(--grey-7);

      &:hover {
        background-color: var(--grey-0);
      }
    }

    li.CodeMirror-hint-active {
      background: var(--c-primary);
      color: var(--grey-0);

      &:hover {
        background-color: var(--c-primary-shade);
      }
    }

    // Special tags
    .cm-hint-colour {
      color: var(--grey-3);
      background-color: var(--grey-2);
    }
  }

  // Custom styling for the various editors across the app
  // -----------------------------------------------------------------------------
  #editor .CodeMirror {

    // Comments in the main editor should have a background-color
    .cm-comment:not(.cm-formatting):not(.cm-fenced-code) {
      background-color: var(--grey-0);

      &:first-child {
        border-top-left-radius: @border-radius;
        border-bottom-left-radius: @border-radius;
        padding-left: 5px;
      }

      &:last-child {
        border-top-right-radius: @border-radius;
        border-bottom-right-radius: @border-radius;
        padding-right: 5px;
      }
    }

    // We need to make sure inline elements (directly after & before formatting
    // elements) also have this nice padding and border.
    .cm-formatting+.cm-comment:not(.cm-formatting):not(.cm-fenced-code) {
      border-top-left-radius: @border-radius;
      border-bottom-left-radius: @border-radius;
      padding-left: 5px;
    }

    .cm-formatting~.cm-comment:not(.cm-formatting):not(.cm-fenced-code) {
      border-top-right-radius: @border-radius;
      border-bottom-right-radius: @border-radius;
      padding-right: 5px;
    }

    // cm-comment should be ignored inside code blocks
    .code-block-line {
      // Retain monospaced font from editor.css
      font-family: Consolas, 'Inconsolata', Menlo, monospace;

      .cm-comment {
        background-color: transparent !important;
        padding: 0 !important;
      }
    }
  }
}
